<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Rolling.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Rolling.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Rolling.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;리스트의&nbsp;아이템들을&nbsp;부드러운&nbsp;움직임으로&nbsp;이동시켜&nbsp;볼&nbsp;수&nbsp;있도록하는&nbsp;컴포넌트&nbsp;
	@author&nbsp;hooriza,&nbsp;modified&nbsp;by&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	리스트의&nbsp;아이템들을&nbsp;부드러운&nbsp;움직임으로&nbsp;이동시켜&nbsp;볼&nbsp;수&nbsp;있도록하는&nbsp;컴포넌트
	
	@class&nbsp;jindo.Rolling
	@extends&nbsp;jindo.Component
	@uses&nbsp;jindo.Effect
	@uses&nbsp;jindo.Transition
	@keyword&nbsp;rolling,&nbsp;롤링
**/
jindo.Rolling&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.Rolling.prototype&nbsp;*/
	
	_oTransition&nbsp;:&nbsp;null,

	/**
		Rolling&nbsp;컴포넌트를&nbsp;생성한다.
		
		@constructor
		@param&nbsp;{String&nbsp;|&nbsp;HTMLElement}&nbsp;el&nbsp;리스트를&nbsp;감싸고&nbsp;있는&nbsp;엘리먼트의&nbsp;id&nbsp;혹은&nbsp;엘리먼트&nbsp;자체&nbsp;&nbsp;
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션객체
			@param&nbsp;{Number}&nbsp;[htOption.nFPS=50]&nbsp;초당&nbsp;롤링&nbsp;이동을&nbsp;표현할&nbsp;프레임수
			@param&nbsp;{Number}&nbsp;[htOption.nDuration=800]&nbsp;transition이&nbsp;진행&nbsp;될&nbsp;시간,&nbsp;단위&nbsp;ms
			@param&nbsp;{String}&nbsp;[htOption.sDirection=&quot;horizontal&quot;]&nbsp;롤링의&nbsp;방향&nbsp;설정.
			&lt;ul&gt;
			&lt;li&gt;&quot;horizontal&quot;&nbsp;:&nbsp;가로&lt;/li&gt;
			&lt;li&gt;&quot;vertical&quot;&nbsp;:&nbsp;세로&lt;/li&gt;
			&lt;/ul&gt;
			@param&nbsp;{Function}&nbsp;[htOption.fEffect=jindo.Effect.linear]&nbsp;jindo.Effect&nbsp;이펙트&nbsp;함수
			@param&nbsp;{String}&nbsp;[htOption.sClassPrefix=&quot;rolling-&quot;]&nbsp;초기&nbsp;HTML/CSS구조에서&nbsp;필요한&nbsp;className&nbsp;앞에&nbsp;붙는&nbsp;prefix를&nbsp;정의
		@example
			&lt;xmp&gt;
			&lt;div&nbsp;id=&quot;horz_wrap&quot;&gt;
				&lt;ul&gt;
					&lt;li&gt;첫번째&lt;/li&gt;
					&lt;li&gt;두번째&lt;/li&gt;
					&lt;li&gt;세번째&lt;/li&gt;
					&lt;li&gt;네번째&lt;/li&gt;
					&lt;li&gt;다섯번째&lt;/li&gt;
					&lt;li&gt;여섯번째&lt;/li&gt;
					&lt;li&gt;일곱번째&lt;/li&gt;
					&lt;li&gt;여덟번째&lt;/li&gt;
					&lt;li&gt;아홉번째&lt;/li&gt;
					&lt;li&gt;마지막&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
			&lt;script&gt;
				new&nbsp;jindo.Rolling(jindo.$(&#39;horz_wrap&#39;),&nbsp;{
					nFPS&nbsp;:&nbsp;50,&nbsp;//&nbsp;(Number)&nbsp;초당&nbsp;롤링&nbsp;이동을&nbsp;표현할&nbsp;프레임수
					nDuration&nbsp;:&nbsp;400,&nbsp;//&nbsp;(ms)&nbsp;jindo.Effect,&nbsp;jindo.Transtition&nbsp;참고
					sDirection&nbsp;:&nbsp;&#39;horizontal&#39;,&nbsp;//&nbsp;||&nbsp;&#39;vertical&#39;
					fEffect&nbsp;:&nbsp;jindo.Effect.linear,&nbsp;//jindo.Effect&nbsp;참고
				}).attach({
					beforeMove&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
						//oCustomEvent.element&nbsp;어느&nbsp;엘리먼트의&nbsp;scrollLeft&nbsp;가&nbsp;바뀌는지
						//oCustomEvent.nIndex&nbsp;몇번째&nbsp;항목으로&nbsp;이동하는지
						//oCustomEvent.nScroll&nbsp;이동할&nbsp;포지션
						//oCustomEvent.stop()시&nbsp;이동하지&nbsp;않음
					},
					afterMove&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
						//oCustomEvent.nIndex&nbsp;몇번째&nbsp;항목으로&nbsp;이동하였는지
					}
				});
			&lt;/script&gt;
			&lt;/xmp&gt;
	**/
	$init&nbsp;:&nbsp;function(el,&nbsp;htOption)&nbsp;{
		this.option({
			nFPS&nbsp;:&nbsp;50,
			nDuration&nbsp;:&nbsp;800,
			sDirection&nbsp;:&nbsp;&quot;horizontal&quot;,
			fEffect&nbsp;:&nbsp;jindo.Effect.linear,
			sClassPrefix&nbsp;:&nbsp;&quot;rolling-&quot;
		});
		
		this.option(htOption&nbsp;||&nbsp;{});

		this._el&nbsp;=&nbsp;jindo.$(el);
		
		var&nbsp;sListClassQuery&nbsp;=&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassPrefix&#39;)&nbsp;+&nbsp;&#39;list&#39;;
		
		this._bUsedClassPrefix&nbsp;=&nbsp;true;
		this._elList&nbsp;=&nbsp;jindo.$$.test(this._el,&nbsp;sListClassQuery)&nbsp;?&nbsp;this._el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;&gt;&nbsp;&#39;&nbsp;+&nbsp;sListClassQuery,&nbsp;el);
		
		if&nbsp;(!this._elList)&nbsp;{
			this._elList&nbsp;=&nbsp;jindo.$$.test(this._el,&nbsp;&#39;ul,&nbsp;ol&#39;)&nbsp;?&nbsp;this._el&nbsp;:&nbsp;jindo.$$.getSingle(&#39;&gt;&nbsp;ul,&nbsp;&gt;&nbsp;ol&#39;,&nbsp;el);
			this._bUsedClassPrefix&nbsp;=&nbsp;false;
		}
			
		this._oKeys&nbsp;=&nbsp;this.option(&#39;sDirection&#39;)&nbsp;==&nbsp;&#39;horizontal&#39;&nbsp;?&nbsp;{
			offsetWidth&nbsp;:&nbsp;&#39;offsetWidth&#39;,
			marginLeft&nbsp;:&nbsp;&#39;marginLeft&#39;,
			marginRight&nbsp;:&nbsp;&#39;marginRight&#39;,
			clientWidth&nbsp;:&nbsp;&#39;clientWidth&#39;,
			scrollLeft&nbsp;:&nbsp;&#39;scrollLeft&#39;
		}&nbsp;:&nbsp;{
			offsetWidth&nbsp;:&nbsp;&#39;offsetHeight&#39;,
			marginLeft&nbsp;:&nbsp;&#39;marginTop&#39;,
			marginRight&nbsp;:&nbsp;&#39;marginBottom&#39;,
			clientWidth&nbsp;:&nbsp;&#39;clientHeight&#39;,
			scrollLeft&nbsp;:&nbsp;&#39;scrollTop&#39;
		};

		this._initTransition();
	},
	
	_initTransition:&nbsp;function(){
		var&nbsp;self&nbsp;=&nbsp;this;
		this._oTransition&nbsp;=&nbsp;new&nbsp;jindo.Transition().fps(this.option(&quot;nFPS&quot;)).attach({
			end&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{

				if&nbsp;(self._nItemCount)&nbsp;{
					var&nbsp;oKeys&nbsp;=&nbsp;self._oKeys;
					self._el[oKeys.scrollLeft]&nbsp;=&nbsp;self._getPosition(self.getIndex()&nbsp;%&nbsp;self._nItemCount);
				}

				/**
					이동한&nbsp;후
					
					@event&nbsp;afterMove
					@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
					@param&nbsp;{Number}&nbsp;nIndex&nbsp;이동한&nbsp;항목의&nbsp;리스트내&nbsp;순서
					@example
						//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
						oRolling.attach(&quot;afterMove&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
				**/
				self.fireEvent(&quot;afterMove&quot;,&nbsp;{&nbsp;nIndex&nbsp;:&nbsp;self.getIndex()&nbsp;});
			}
		});
	},
	
	/**
		jindo.Transition&nbsp;컴포넌트의&nbsp;인스턴스를&nbsp;가져온다.
		
		@method&nbsp;getTransition
		@return&nbsp;{jindo.Transition}
	**/
	getTransition&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oTransition;
	},
	
	/**
		리스트&nbsp;엘리먼트를&nbsp;구한다
		
		@method&nbsp;getList
		@return&nbsp;{HTMLElement}&nbsp;리스트&nbsp;엘리먼트&nbsp;ul&nbsp;또는&nbsp;ol
	**/
	getList&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elList;
	},
	
	/**
		리스트의&nbsp;아이템(LI,&nbsp;즉&nbsp;자식&nbsp;엘리먼트)들을&nbsp;구한다.
		
		@method&nbsp;getItems
		@return&nbsp;{Array}&nbsp;LI&nbsp;엘리먼트들의&nbsp;배열
	**/
	getItems&nbsp;:&nbsp;function()&nbsp;{
		
		var&nbsp;sItemClassQuery&nbsp;=&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassPrefix&#39;)&nbsp;+&nbsp;&#39;item&#39;;
		return&nbsp;this._bUsedClassPrefix&nbsp;?&nbsp;jindo.$$(&#39;&gt;&nbsp;&#39;&nbsp;+&nbsp;sItemClassQuery,&nbsp;this._elList)&nbsp;:&nbsp;jindo.$$(&#39;&gt;&nbsp;li&#39;,&nbsp;this._elList);
		
	},
	
	_offsetSize&nbsp;:&nbsp;function(el)&nbsp;{
		var&nbsp;eEl&nbsp;=&nbsp;jindo.$Element(el),
			oKeys&nbsp;=&nbsp;this._oKeys,
			nMarginLeft&nbsp;=&nbsp;parseInt(eEl.css(oKeys.marginLeft),&nbsp;10)&nbsp;||&nbsp;0,
			nMarginRight&nbsp;=&nbsp;parseInt(eEl.css(oKeys.marginRight),&nbsp;10)&nbsp;||&nbsp;0;
		return&nbsp;el[oKeys.offsetWidth]&nbsp;+&nbsp;nMarginLeft&nbsp;+&nbsp;nMarginRight;
	},
	
	/**
		현재&nbsp;표시되고있는&nbsp;LI의&nbsp;인덱스를&nbsp;구한다.
		
		@method&nbsp;getIndex
		@return&nbsp;{Number}&nbsp;현재&nbsp;표시되고있는&nbsp;LI의&nbsp;인덱스
	**/
	getIndex&nbsp;:&nbsp;function()&nbsp;{
		if&nbsp;(this.isMoving())&nbsp;{
			return&nbsp;this._nMoveTo;
		}
		
		var&nbsp;el&nbsp;=&nbsp;this._el,
			oKeys&nbsp;=&nbsp;this._oKeys,
			nScroll&nbsp;=&nbsp;el[oKeys.scrollLeft],
			aItems&nbsp;=&nbsp;this.getItems(),
			nSize&nbsp;=&nbsp;0,
			n&nbsp;=&nbsp;0,
			nMinDistance&nbsp;=&nbsp;99999999;

		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;aItems.length;&nbsp;i++)&nbsp;{
			var&nbsp;nDistance&nbsp;=&nbsp;Math.abs(nScroll&nbsp;-&nbsp;nSize);
			
			if&nbsp;(nDistance&nbsp;&lt;&nbsp;nMinDistance)&nbsp;{
				nMinDistance&nbsp;=&nbsp;nDistance;
				n&nbsp;=&nbsp;i;
			}
			
			nSize&nbsp;+=&nbsp;this._offsetSize(aItems[i]);
		}
		
		return&nbsp;n;
	},
	
	_getPosition&nbsp;:&nbsp;function&nbsp;(n)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;this._el,
			oKeys&nbsp;=&nbsp;this._oKeys,
			aItems&nbsp;=&nbsp;this.getItems(),
			nPos&nbsp;=&nbsp;0,&nbsp;nSize&nbsp;=&nbsp;this._getSize();
		
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;n;&nbsp;i++)&nbsp;{
			nPos&nbsp;+=&nbsp;this._offsetSize(aItems[i]);
		}
		
		if&nbsp;(nPos&nbsp;+&nbsp;el[oKeys.clientWidth]&nbsp;&gt;&nbsp;nSize)&nbsp;{
			nPos&nbsp;=&nbsp;nSize&nbsp;-&nbsp;el[oKeys.clientWidth];
		}
		
		return&nbsp;nPos;
	},
	
	_getSize&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;aItems&nbsp;=&nbsp;this.getItems(),
			nSize&nbsp;=&nbsp;0;
			
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;aItems.length;&nbsp;i++)&nbsp;{
			nSize&nbsp;+=&nbsp;this._offsetSize(aItems[i]);
		}
		
		return&nbsp;(this._nSize&nbsp;=&nbsp;nSize);
	},
	
	_move&nbsp;:&nbsp;function(n)&nbsp;{
		var&nbsp;el&nbsp;=&nbsp;this._el,
			oKeys&nbsp;=&nbsp;this._oKeys,
			aItems&nbsp;=&nbsp;this.getItems(),
			nPos&nbsp;=&nbsp;this._getPosition(n),
			nSize&nbsp;=&nbsp;this._getSize();

		var&nbsp;htParam&nbsp;=&nbsp;{
			element&nbsp;:&nbsp;el,&nbsp;//&nbsp;어느&nbsp;엘리먼트의&nbsp;scrollLeft&nbsp;가&nbsp;바뀌는지
			nIndex&nbsp;:&nbsp;n,&nbsp;//&nbsp;몇번째&nbsp;항목으로&nbsp;이동하는지
			nScroll&nbsp;:&nbsp;nPos
		};
		
		/**
			이동하기&nbsp;전
			
			@event&nbsp;beforeMove
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{HTMLElement}&nbsp;element&nbsp;scrollLeft또는&nbsp;scrollTop이&nbsp;바뀔&nbsp;대상&nbsp;엘리먼트
			@param&nbsp;{Number}&nbsp;nIndex&nbsp;이동할&nbsp;항목의&nbsp;리스트내&nbsp;순서
			@param&nbsp;{Number}&nbsp;nScroll&nbsp;이동할&nbsp;스크롤위치
			@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;이동하지&nbsp;않음
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oRolling.attach(&quot;beforeMove&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		if&nbsp;(this.fireEvent(&#39;beforeMove&#39;,&nbsp;htParam)&nbsp;&amp;&amp;&nbsp;el[oKeys.scrollLeft]&nbsp;!=&nbsp;htParam.nScroll)&nbsp;{
			&nbsp;
			var&nbsp;htDest&nbsp;=&nbsp;{};
			htDest[oKeys.scrollLeft]&nbsp;=&nbsp;this.option(&#39;fEffect&#39;)(htParam.nScroll);
			this._nMoveTo&nbsp;=&nbsp;n;
			
			this.getTransition().abort().start(this.option(&#39;nDuration&#39;),&nbsp;htParam.element,&nbsp;htDest);
			return&nbsp;true;
		}
		return&nbsp;false;
	},
	
	/**
		n번째&nbsp;아이템으로&nbsp;이동한다.
		
		@method&nbsp;moveTo
		@param&nbsp;{Number}&nbsp;n&nbsp;이동&nbsp;할&nbsp;위치
		@return&nbsp;{Boolean}&nbsp;실제로&nbsp;이동했는지&nbsp;여부&nbsp;
	**/
	moveTo&nbsp;:&nbsp;function(n)&nbsp;{
		n&nbsp;=&nbsp;Math.min(n,&nbsp;this.getItems().length&nbsp;-&nbsp;1);
		n&nbsp;=&nbsp;Math.max(n,&nbsp;0);
		return&nbsp;this._move(n);
	},

	/**
		뒤에서부터&nbsp;n번째&nbsp;아이템으로&nbsp;이동한다.
		
		@method&nbsp;moveLastTo
		@param&nbsp;{Number}&nbsp;n&nbsp;이동&nbsp;할&nbsp;위치
		@return&nbsp;{Boolean}&nbsp;실제로&nbsp;이동했는지&nbsp;여부
	**/
	moveLastTo&nbsp;:&nbsp;function(n)&nbsp;{
		return&nbsp;this.moveTo(this.getItems().length&nbsp;-&nbsp;1&nbsp;-&nbsp;n);
	},

	/**
		현재&nbsp;위치와&nbsp;n만큼&nbsp;떨어진&nbsp;아이템으로&nbsp;이동한다.
		
		@method&nbsp;moveBy
		@param&nbsp;{Number}&nbsp;n&nbsp;이동&nbsp;할&nbsp;위치
		@return&nbsp;{Boolean}&nbsp;실제로&nbsp;이동했는지&nbsp;여부
	**/
	moveBy&nbsp;:&nbsp;function(n)&nbsp;{
		return&nbsp;this.moveTo(this.getIndex()&nbsp;+&nbsp;n);
	},
	
	/**
		롤링이&nbsp;진행중인지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;isMoving
		@return&nbsp;{Boolean}
	**/
	isMoving&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oTransition.isPlaying();
	},
	
	/**
		리스트의&nbsp;아이템들이&nbsp;가려있는지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;isOverflowed
		@return&nbsp;{Boolean}&nbsp;리스트의&nbsp;아이템들이&nbsp;가려있는지&nbsp;여부
	**/
	isOverflowed&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._getSize()&nbsp;&gt;&nbsp;this._el[this._oKeys.clientWidth];
	},
	
	/**
		롤링&nbsp;영역&nbsp;내에서&nbsp;잘리지&nbsp;않고&nbsp;온전히&nbsp;보여지는&nbsp;아이템의&nbsp;개수를&nbsp;가져온다.
		
		@method&nbsp;getDisplayedItemCount
		@return&nbsp;{Number}
	**/
	getDisplayedItemCount&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;nDisplayed&nbsp;=&nbsp;0,
			aItems&nbsp;=&nbsp;this.getItems(),
			nPos&nbsp;=&nbsp;0;
		
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;aItems.length;&nbsp;i++)&nbsp;{
			nPos&nbsp;+=&nbsp;this._offsetSize(aItems[i]);
			if&nbsp;(nPos&nbsp;&lt;=&nbsp;this._el[this._oKeys.clientWidth])&nbsp;{
				nDisplayed++;&nbsp;
			}&nbsp;else&nbsp;{
				break;
			}
		}
		
		return&nbsp;nDisplayed;
	}

}).extend(jindo.Component);</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>